<template>
    <div class="update-pwd wly-page">
        <v-header title="修改密码"></v-header>

        <!--表单start-->
        <div class="update-content">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                label-position="right"
                label-suffix="："
                class="ruleForm">
                <el-form-item label="旧密码" prop="oldPasswd">
                    <el-input size="mini" v-model="ruleForm.oldPasswd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPasswd">
                    <el-input size="mini" :minlength="8" :maxlength="8" v-model="ruleForm.newPasswd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPwd">
                    <el-input size="mini" :maxlength="8" v-model="ruleForm.checkPwd" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="button-grp">
                        <el-button type="primary" size="small" v-prevent-re-click @click="submitForm('ruleForm')">保存
                        </el-button>
                        <el-button size="small" @click="clearData" class="cancel">取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!--表单end-->

    </div>
</template>

<script>
    import CryptoJS from 'crypto-js'
    import {UPDATE_PWD} from '@api/url'
    import ajax from '@api/ajax'

    export default {
        name: 'UpdatePwd',
        data () {
            // 新密码验证器
            let newValidator = (rule, value, callback) => {
                if (this.ruleForm.checkPwd !== undefined) {
                    this.$refs.ruleForm.validateField('checkPwd')
                }
                callback()
            }
            // 确认密码格式
            const reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,}$/
            let checkPassword = (rule, value, callback) => {
                // if (reg.test(value) === false) {
                //     callback(new Error('密码需包含大小写字母和数字!'))
                // }
                callback()
            }

            // 确认密码验证器
            let checkValidator = (rule, value, callback) => {
                if (value !== this.ruleForm.newPasswd) {
                    callback(new Error('两次输入密码不一致！'))
                } else {
                    callback()
                }
            }

            return {
                ruleForm: {},
                rules: {
                    oldPasswd: [
                        {required: true, message: '此项为必输项！', trigger: 'blur'}
                    ],
                    newPasswd: [
                        {required: true, message: '此项为必输项！', trigger: 'blur'},
                        {validator: newValidator, trigger: 'blur'},
                        {validator: checkPassword, trigger: 'blur'}
                    ],
                    checkPwd: [
                        {required: true, message: '此项为必输项！', trigger: 'blur'},
                        {validator: checkValidator, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            // 清空表单
            clearData: function () {
                this.ruleForm = {}
                this.$refs.ruleForm.clearValidate()
            },
            encryptByDES (message, key) {
                const keyHex = CryptoJS.enc.Utf8.parse(key)
                const encrypted = CryptoJS.DES.encrypt(message, keyHex, {
                    mode: CryptoJS.mode.ECB,
                    padding: CryptoJS.pad.Pkcs7
                })
                return encrypted.toString()
            },
            getEncryptPassword (pwd) {
                const password = pwd
                const key = '38442065' + this.userName
                return this.encryptByDES(password, key)
            },
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let userInfo = this.$storeSave.state.userInfo
                        let form = {
                            userId: this.$storeSave.state.userInfo.userId,
                            oldPassword: this.getEncryptPassword(this.ruleForm.oldPasswd),
                            password: this.getEncryptPassword(this.ruleForm.newPasswd)
                        }
                        ajax.post(UPDATE_PWD, form).then(res => {
                            this.$message.success('修改成功')
                        })
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .update-pwd
        height 100%

        .update-content
            padding 10px 10px 20px 10px

        .ruleForm
            margin-top 2%
            margin-left 20%

            .el-input
                width 40%

            .button-grp
                padding 20px 50px

                .cancel
                    margin-left 8%

</style>
